<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>超算数据管理平台</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    .header {
      height: 50px;
      background: #252c34;
      display: flex;
      position: relative;
    }

    .logo {
      width: 150px;
      background: transparent url(images/logo.png) no-repeat center;
    }

    .u-menu {
      flex: 1;
      display: flex;
    }

    .u-menu li a,
    .u-info a {
      display: block;
      height: 50px;
      line-height: 50px;
      color: #aaa;
      text-align: center;
      padding: 0 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .u-menu li a:hover,
    .u-info a:hover {
      color: #fff;
      background: rgba(200, 200, 200, .1);
    }
    .u-menu li a.on {
      color: #fff;
      background: rgba(200, 200, 200, .1);
    }
    .u-info {
      width: 400px;
      display: flex;
      padding-right: 20px;
      justify-content: flex-end;
    }
    .u-info .l1 {
      position: relative;
    }
    .u-info .l1::before {
      content: '';
      width: 230px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 60px;
      z-index: 2;
      visibility: hidden;
    }
    .u-info .l1::after {
      content: '';
      width: 1px;
      height: 30px;
      background: #16191d;
      position: absolute;
      top: 0;
      bottom: 0;
      right: -6px;
      margin: auto;
      z-index: 4;
    }
    .u-info .wendang {
      padding-left: 16px;
    }
    .wendang .help-btn {
      padding: 0 13px 0 10px;
    }
    .u-info .avator-btn {
      position: relative;
      padding: 0 30px;
    }
    .u-info .avator-btn img {
      display: block;
      width: 30px;
      height: 30px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    .u-info .icohp {
      font-size: 26px;
      vertical-align: -5px;
      margin-right: 5px;
      color: #ccc;
    }
    .drop-down {
      visibility: hidden;
      width: 300px;
      max-width: 300px;
      background: #fff;
      border: 1px solid #e9e9e9;
      position: absolute;
      top: 50px;
      right: 0;
      z-index: 10;
    }
    .drop-down .d1 {
      display: flex;
    }

    .d1 #h-avator {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    .d1 .dx {
      flex: 1;
      line-height: 30px;
    }
    .d1 .dx a {
      color: #0e9cf2;
      font-size: 12px;
    }

    .d1.d1a {
      padding: 20px 20px;
      border-bottom: 1px solid #e9e9e9;
    }

    .d1.d1b {
      line-height: 30px;
      padding: 20px 20px;
      border-bottom: 1px solid #e9e9e9;
    }

    .d1b .buyhash-btn {
      display: block;
      padding: 0 8px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 12px;
      color: #0e9cf2;
      background: #f7f7f7;
      border-radius: 2px;
    }

    .d1b .buyhash-btn:hover {
      opacity: 0.9;
      color: #0e9cf2;
      background: #f1f1f1;
    }

    .d1b .yue {
      margin-right: 10px;
      flex: 1;
    }
    .u-info .l1:hover .drop-down,
    .u-info .l1:hover::before {
      visibility: visible;
      transition: .001s .2s;
    }
    .ula li {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      color: #555555;
      cursor: pointer;
    }
    .ula li.hong {
      color: #f22;
    }
    .ula li:hover {
      color: #0e9cf2;
    }
    .ula li .nav-exit-btn {
      color: #555555;
      text-align: left;
      padding: 0;
    }
    .ula li .nav-exit-btn:hover {
      color: #0e9cf2;
      background: #fff;
    }
    .ifr-w {
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 3;
    }

    .ifr-w .ifr {
      border: 0;
      width: 100%;
      height: 100%;
    }
    .modal-footer {
      height: 5px;
    }
    .modal1 .ivu-modal-header-inner {
      padding: 10px 0 25px 0;
      text-align: center;
      font-weight: normal;
      font-size: 20px;
      color: #666;
    }
    .modal1 .ivu-modal-header {
      border-bottom: 2px solid #f2f2f2;
    }
    .modal1 .ivu-modal-footer {
      border-top: 0;
    }
    .modal1 .ivu-modal-content {
      border-radius: 3px;
    }
    .modal1 .ivu-modal-header {
      padding-top: 17px;
      padding-bottom: 17px;
    }
    .modal1.oks .ivu-modal-body {
      padding: 52px 16px;
    }
    .fm1 {
      padding: 16px 10px 0 10px;
      position: relative;
    }
    .accNumber-w {
      padding: 0 0 0 54px;
    }
    .accNumber-w .item {
      display: flex;
      margin-bottom: 22px;
    }
    .accNumber-w .item .lbe {
      width: 65px;
      height: 30px;
      line-height: 30px;
      text-align: right;
      color: #999;
      font-size: 16px;
    }
    .accNumber-w .item .lbe1 {
      
    }
    .accNumber-w .item .lbe2 {
      height: 40px;
      line-height: 45px;
    }
    .accNumber-w .item .inp-accNumber,
    .accNumber-w .item .inp-code {
      border: 0;
      padding: 0 5px;
      font-size: 20px;
      color: #333;
      margin-left: 20px;
      box-shadow: 0 0 0 1000px #fff inset;
    }
    .accNumber-w .item .inp-code {
      width: 137px;
      border-bottom: 2px solid #eee;
    }
    .accNumber-w .item .seed-btn {
      display: block;
      width: 130px;
      height: 42px;
      border: 0;
      font-size: 16px;
      padding: 0 8px;
      color: #fff;
      background-color: #f2840e;
      cursor: pointer;
    }
    .accNumber-w .item .seed-btn[disabled] {
      color: #666;
      background-color: #eee;
      cursor: not-allowed;
    }
    .item2.err::before {
      content: '验证码错误';
      font-size: 12px;
      color: #f20e0e;
      position: absolute;
      bottom: 59px;
      left: 150px;
    }
    .accNumber-w .item2 {
      margin-bottom: 43px;
    }
    .accNumber-w .next-btn,
    .pwd-w .sb-btn {
      display: block;
      text-align: center;
      border: 0;
      cursor: pointer;
      width: 270px;
      height: 40px;
      font-size: 16px;
      color: #fff;
      background-color: #0e9cf2;
      box-shadow:0px 1px 3px 0px rgba(153,153,153,0.4);
      border-radius:3px;
      margin-left: 36px;
    }
    .accNumber-w .next-btn[disabled],
    .pwd-w .sb-btn[disabled] {
      color: #999;
      background-color: #eee;
      cursor: not-allowed;
    }
    
    .pwd-w {
      display: none;
      padding: 0 70px;
    }
    .pwd-w .item {
      margin-bottom: 15px;
      position: relative;
    }
    .pwd-w .item.it2 {
      margin-bottom: 40px;
    }
    .pwd-w .item::before {
      font-size: 12px;
      color: #f20e0e;
      position: absolute;
      bottom: -22px;
      left: 1px;
      z-index: 1;
    }
    .pwd-w .it1.err::before {
      content: '密码格式错误';
    }
    .pwd-w .it2.err::before {
      content: '密码不一致';
    }
    
    .pwd-w .item::after {
      content: '';
      width: 18px;
      height: 18px;
      border-radius: 55%;
      background: transparent url(images/okm.png) no-repeat;
      position: absolute;
      top: 11px;
      right: 0;
      z-index: 2;
      display: none;
    }
    .pwd-w .it1.ok::after {
      display: block;
    }
    .pwd-w .it2.ok::after {
      display: block;
    }
    
    .pwd-w .item .inpm {
      display: block;
      border: 0;
      border-bottom: 2px solid #eee;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      color: #999;
      padding: 0 5px;
    }
    .pwd-w .sb-btn {
      margin-left: auto;
      margin-right: auto;
    }
    .rst-lzm {
      display: none;
      padding: 30px 0;
      position: absolute;
      width: 100%;
      height: 100%;
      box-shadow: 0 20px 0 #fff;
      background: #fff;
      top: 0;
      left: 0;
      z-index: 10;
    }
    .rst-lzm .im1 {
      display: block;
      margin: 0 auto 25px auto;
    }
    .rst-lzm .pv {
      text-align: center;
      font-size: 20px;
      color: #666;
      margin-bottom: 27px;
    }
    .rst-lzm .reload-btn {
      display: block;
      margin: 0 auto;
      padding-top: 7px;
      padding-bottom: 8px;
      box-shadow:0px 1px 3px 0px rgba(153,153,153,0.4);
    }
    .rst-lzm .ivu-btn>span {
      font-size: 16px;
    }
    .fm1.on .pwd-w {
      display: block;
    }
    .fm1.on .accNumber-w {
      display: none;
    }
    .modal1.oks .rst-lzm {
      display: block;
    }
    .modal1.oks .ivu-modal-header {
      display: none;
    }
    .modal_notice .ivu-modal-header-inner {
      font-size: 16px;
      color: #555;
      font-weight: normal;
    }
    .modal_notice .ivu-modal-footer {
      border-top: none;
    }
    
    
    
    .mo-notice-w {
      padding: 10px;
    }
    .modal_notice .h2st {
      color: #555;
      font-size: 18px;
      text-align: center;
      margin-bottom: 10px;
    }
    .modal_notice .p {
      color: #555;
      font-size: 15px;
      line-height: 1.4;
      margin-bottom: 8px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <header class="header">
      <a class="logo" href="/"></a>
      <ul class="u-menu">
        <li v-for="(item, index) of nav" :key="index"><a href="javascript:;" :class="{on: path === item.url}" @click="toUrl(index)">{{item.name}}</a></li>
      </ul>
      <ul class="u-info">
        <li class="l1">
          <a class="avator-btn" href="javascript:;" @click="G.to('home')"><img id="i_avator" src="./images/lo1.png"></a>
          <section class="drop-down">
            <div class="d1 d1a">
              <img id="h-avator" :src="avator" alt="">
              <div class="dx texto">{{account}}</div>
            </div>
            <div class="d1 d1b">
              <p class="yue texto">账户余额 : {{getFormatAccountBalance}} TH</p>
              <a class="buyhash-btn texto" href="javascript:;" @click="G.to('buyHash')">购买算力</a>
            </div>
            <ul class="ula">
              <li @click="G.to('hashInfo')">费用中心</li>
              <li @click="G.to('hashOrder')">我的订单</li>
              <li class="hong"><a class="nav-exit-btn" href="/loginOut">退出</a></li>
            </ul>
          </section>
        </li>
        <li class="wendang"><a class="help-btn" href="docx.html" target="_blank"><i class="iconfont icohp icon-help"></i>文档</a></li>
      </ul>
    </header>
    <div class="ifr-w">
      <iframe class="ifr" id="ifr" :src="path + '.html'" frameborder="0"></iframe>
    </div>
    <Modal class="modal1" :class="{oks: m_cls.isOk}" v-model="modal1" title="重置密码" width="500" class-name="vertical-center-modal"
      :closable="false">
      <div class="fm1" :class="{on: m_cls.isOn}">
        <div class="accNumber-w">
          <div class="item">
            <label class="lbe lbe1">账&emsp;号 : </label>
            <input class="inp-accNumber" type="text" v-model="account" readonly>
          </div>
          <div class="item item2" :class="{err: codeErr}">
            <label class="lbe lbe2">验证码 : </label>
            <input class="inp-code" type="text" onfocus="removeAttribute('readonly')" v-model="rst.smsCode" maxlength="6" @input="inpSmsFn" readonly onpaste="return false">
            <button class="seed-btn" @click="getCode" :disabled="!isSeed">{{seedText}}</button>
          </div>
          <button class="next-btn" :disabled="!isNext" @click="askNext">下一步</button>
        </div>

        <div class="pwd-w">
          <div class="item it1" :class="{err: !isPasswordEmpty && !isPasswordFormatPass, ok: !isPasswordEmpty && isPasswordFormatPass}">
            <input class="inpm inp-m1" type="password" v-model="rst.password" maxlength="16" placeholder="设置密码" onpaste="return false">
          </div>
          <div class="item it2" :class="{err: !isPassword2Empty && !isPassword2FormatPass, ok: !isPassword2Empty && isPassword2FormatPass}">
            <input class="inpm inp-m2" type="password" v-model="rst.password2" maxlength="16" placeholder="确认密码" onpaste="return false">
          </div>
          <button class="sb-btn" @click="submitPassword" :disabled="!isPwdSubmit">确定</button>
        </div>

        <div class="rst-lzm">
          <img class="im1" src="images/ok.png" alt="">
          <p class="pv">重置成功</p>
          <i-button type="primary" class="w270 reload-btn" size="large" @click="toLogin">重新登录</i-button>
        </div>

      </div>

      <div class="modal-footer" slot="footer"></div>
    </Modal>
    
    
    <Modal class="modal modal_notice" v-model="modal_notice" title="公告" width="700" class-name="vertical-center-modal" :mask-closable="false">
      <div class="mo-notice-w">
        <h2 class="h2st">Tesra超算网络 2018.12.20 停机维护公告</h2>
        <p class="p">尊敬的用户：</p>
        <p class="p">为保证服务器的稳定运行和服务质量，《Tesra超算网络》将于2018.12.20 23:00进行停机维护，预计维护时间1小时，维护期间所有功能都将无法使用，请各位用户相互转告并提前留意时间，以免造成不必要的损失，维护期间给您带来的不便敬请谅解，感谢大家的理解和支持！</p>
        <p class="p"> 【本次更新内容】：</p>
        <p class="p">1、新增模型阶段性的生成和下载</p>
        <p class="p">2、优化控制台界面，新增数据管理和模型管理的总览信息</p>
        <p class="p">3、新增弹性减容功能</p>
        <p class="p">4、修复部分Bug</p>
      </div>
      <div class="modal-footer" slot="footer"></div>
    </Modal>
    
    
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/qs.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    (function () {
      window.onhashchange = function () {
        var hash = location.hash.slice(1).match(/[a-z_-]+/i)
        
        var tit = frames[0].document.getElementById('app').getAttribute('file-name');
        if (tit != hash) {
          document.getElementById('ifr').setAttribute('src', hash + '.html')
        }

        if (hash) {
          // 根据hash对应的map设置标题
          document.title = document.title.replace(/^(.+?)\s\-.+$/, '$1') + ' - ' + (H[hash] ? H[hash] : H['home'])
        }
      }
      setInterval(() => {
        try {
          var tit = frames[0].document.getElementById('app').getAttribute('file-name');
          var hash = location.hash.slice(1).match(/[a-z_-]+/i);
          if (tit != hash) {
            location.hash = tit
          }
        } catch(e) {}
        
      }, 1000)
    })()
    var vm = new Vue({
      el: '#app',
      data: {
        path: 'home',
        avator: 'images/lo1.png',
        account: '',
        accountBalance: 0,
        modal1: false,
        timerNumber: 60,
        rCount: '',
        codeErr: false,
        pwd1Err: false,
        pwd2Err: false,
        pwd1Ok: false,
        pwd2Ok: false,
        m_cls: {
          isOn: false,
          isOk: false,
        },
        rst: {
          accNumber: '',
          smsCode: '',
          password: '',
          password2: '',
        },
        modal_notice: false,
        nav: [{
            name: '总览',
            url: 'home',
          },
          {
            name: 'AI训练',
            url: 'ai_training',
          },
          {
            name: '数据管理',
            url: 'dataManage',
          },
          {
            name: '模型管理',
            url: 'modelManage',
          },
        ],
        qy: {

        },
      },
      methods: {
        init() {
          this.requestUserData()
        },
        toUrl(index) {
          var item = this.nav[index]
          var target = item.target
          // 如果target为true则会新标签跳转
          if (target) {
            window.open(item.url, '_blank').location
            return
          }
          this.path = item.url
          location.hash = item.url
        },
        toLogin() {
          location.href = 'login.html'
        },
        inpSmsFn() {
          this.codeErr = false
        },
        resetPwd() {
          this.modal1 = true
          this.m_cls.isOn = false
          this.m_cls.isOk = false
          this.codeErr = false
          this.pwd1Err = false
          this.pwd2Err = false
          this.pwd1Ok = false
          this.pwd2Ok = false
          var rst = this.rst
          for (var key in rst) {
            rst[key] = ''
          }
        },
        // 倒计时
        runTimer() {
          this.rCount--
          setTimeout(() => {
            if (this.rCount > 1) {
              this.runTimer()
            } else {
              this.rCount = this.timerNumber
            }
          }, 1000);
        },
        // 获取验证码
        getCode() {
          if (!this.isAccNumberEmpty()) {
            this.runTimer()
            this.requestSmsCode()
          }
        },
        // 判断账号是否为空
        isAccNumberEmpty() {
          return this.account.length === 0
        },

        // 获取验证码
        requestSmsCode() {
          var realUrl = this.isPhone ? '/getResetPhoneCode' : '/getEmailCode';
          var mockUrl = '' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var pdata = {
            phone: this.account,
          }
          var edata = {
            email: this.account
          }
          var data1 = G.paramsSerializer(pdata)
          var data2 = G.paramsSerializer(edata)
          var data = this.isPhone ? data1 : data2
          // 立即提交
          axios.post(url, data).then(res => {})
            .catch(err => {
              console.log(err)
            });
        },
        // 下一步(提交验证码)
        askNext: G.debounce(function() {
          var realUrl = this.isPhone ? '/nextResetPhone' : '/nextResetEmail';
          var mockUrl = '' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var pdata = {
            phone: this.account,
            code: this.rst.smsCode
          }
          var edata = {
            email: this.account,
            code: this.rst.smsCode
          }
          var data1 = G.paramsSerializer(pdata)
          var data2 = G.paramsSerializer(edata)
          var data = this.isPhone ? data1 : data2
          axios.post(url, data).then(res => {
              if (res.data.stateCode == 1) {
                this.m_cls.isOn = true
              } else {
                this.codeErr = true
              }
            })
            .catch(err => {
              console.log(err)
            });
        }, G.DEBOUNCE_DELAY || 200),
        // 提交密码
        submitPassword: G.debounce(function() {
          var realUrl = this.isPhone ? '/ResetPhone' : '/ResetEmail';
          var mockUrl = '' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var ydata = {
            pwds: this.rst.password
          }
          var data = G.paramsSerializer(ydata)
          axios.post(url, data).then(res => {
              if (res.data.stateCode == 1) {
                this.m_cls.isOk = true
              } else {
                this.$Message.error(res.data.msg)
              }
            })
            .catch(err => {
              console.log(err)
            });
        }, 200),
        
        // 获取用户数据
        requestUserData() {
          var realUrl = '/user/finduser';
          var mockUrl = '' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          // 立即提交
          axios.post(url, {
              withCredentials: true,
            }).then(res => {

              if (res.data.code == 1) {
                console.log("成功" + res.data.data.listModel);

                this.account = res.data.data.username;
                this.accountBalance = res.data.data.points;
              } else {
                console.log(res.data.message);
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
      },
      computed: {
        isNext() {
          var s = this.rst.smsCode;
          return this.isAccNumPass && /^\d{6}$/.test(s)
        },
        seedText() {
          return this.rCount === this.timerNumber ? '获取验证码' : this.rCount + 'S后重新获取'
        },
        isSeed() {
          return this.isAccNumPass && this.rCount === this.timerNumber
        },
        isPasswordEmpty() {
          return this.rst.password.length === 0
        },
        isPassword2Empty() {
          return this.rst.password2.length === 0
        },
        // 判断密码是否通过
        isPasswordFormatPass() {
          return /^\S{6,16}$/.test(this.rst.password)
        },
        // 判断再次输入的密码是否通过
        isPassword2FormatPass() {
          return this.rst.password && this.rst.password === this.rst.password2
        },
        isPwdSubmit() {
          return this.isPasswordFormatPass && this.isPassword2FormatPass
        },
        isAccNumPass() {
          return /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/.test(this.account) || this.isPhone
        },
        // 判断是否是手机号
        isPhone() {
          return /^1\d{10}$/.test(this.account)
        },
        // 获取格式化后的账户余额
        getFormatAccountBalance() {
          return G.toThousands(G.roundFixed(this.accountBalance))
        },
      },
      created() {
        var hash = location.hash.slice(1).match(/[a-z_-]+/i).toString()
        if (hash) {
          this.path = hash
          console.log(this.path)
        } else {
          this.path = 'home'
        }
      },
      mounted() {
        this.init()
        this.rCount = this.timerNumber
        this.modal_notice = false
      },
    })
  </script>
</body>

</html>